<template>
  <div>
    <el-card class="mb-10">
      <CategorySelect :disabled="status != STATUS.SPULIST"></CategorySelect>
    </el-card>
    <el-card>
      <SpuList v-if="status == STATUS.SPULIST" v-model="status" @spuInfo="getSpuInfo"></SpuList>
      <SpuForm v-if="status == STATUS.SPUFORM" v-model="status" :spuInfo="spuInfo" @spuInfo="getSpuInfo"></SpuForm>
      <SkuForm v-if="status == STATUS.SKULIST" v-model="status" :spuInfo="spuInfo" @spuInfo="getSpuInfo"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
export enum STATUS{
  SPULIST = 1,
  SPUFORM = 2,
  SKULIST = 3,
}
</script>
<script setup lang="ts">
// 把主体内容拆成三部分 - 分别是主列表(spuList)、新增SPU(spuForm)、新增SKU(skuForm)
// 把主体内容的三部分切换功能先完成,然后再每个页面做每个页面的功能
import SpuList from './components/SpuList/index.vue'
import SpuForm from './components/SpuForm/index.vue'
import SkuForm from './components/SkuForm/index.vue'
import { ref } from 'vue';
import type { SpuModel } from '@/api/spu';

const status = ref(STATUS.SPULIST); // 1展示主列表  2展示新增SPU  3展示新增SKU

const initSpuInfo = () => ({
  category3Id: undefined,
  spuName:'',
  description: '',
  tmId: undefined,
  spuSaleAttrList: [],
  spuImageList: []
})
const spuInfo = ref<SpuModel>(initSpuInfo())
const getSpuInfo = (row: SpuModel | undefined) => {
  if (row) {
    spuInfo.value = row // 有值赋值
  } else {
    spuInfo.value = initSpuInfo() // 没有值清空
  }
}

</script>

<style scoped>

</style>